<template>
  <section class="todoapp">
    <TodoHeader :arr='list' @add='addFn'></TodoHeader>
    <TodoMain :arr='showArr' @del='delFn' ></TodoMain>
    <TodoFooter :arr='list' :status='status' @cleardone='clearFn' @toggle='toggleFn'></TodoFooter>
  </section>
</template>
<script>
import './styles/base.css'
import './styles/index.css'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [],
      status: 'all'
    }
  },
  methods: {
    addFn (taskName) {
      this.list.push({
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 100,
        name: taskName,
        isDone: false
      })
    },
    delFn (id) {
      const i = this.list.findIndex(item => item.id === id)
      this.list.splice(i, 1)
    },
    toggleFn (status) {
      this.status = status
    },
    clearFn (doneArr) {
      this.list = doneArr
    }
  },
  computed: {
    showArr () {
      if (this.status === 'no') {
        return this.list.filter(item => item.isDone === false)
      }
      if (this.status === 'yes') {
        return this.list.filter(item => item.isDone === true)
      }
      return this.list
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        localStorage.setItem('list', JSON.stringify(this.list))
      }
    }
  }
}
</script>
